<template>
	<view class="container">
		<view class="bg_title">
			<view class="back" @click="back">
				<text class="iconfont icon-return"></text>
			</view>
			<view class="title">
				分类
			</view>
		</view>
		<view class="product_none" v-if="product_list_length == 0">
			此分类暂无商品
		</view>
		<view class="tabs">
			<view :class="tabs_index == 0?'tab_title_active':'tab_title'" @click="tabs_load(0)">
				综合
			</view>
			<view :class="tabs_index == 1?'tab_title_active':'tab_title'" @click="tabs_load(1)">
				销量
			</view>
			<view :class="tabs_index == 2?'tab_title_active':'tab_title'" @click="tabs_load(2)">
				价格
			</view>
			<view class="tab_icon" @click="tabs_icon == 0 ? tabs_icon = 1 : tabs_icon = 0">
				<text class="iconfont" :class="tabs_icon == 0 ? 'icon-qrcode_fill' : 'icon-qrcode'"></text>
			</view>
		</view>
		<view class="product">
			<view v-if="tabs_icon == 0">
				<view class="product_list" v-for="(item,index) in product_list" @click="navTo('../product/index?_id='+item._id)">
					<view class="product_list_image">
						<image :src="item.produce_info.product_important_img" mode="scaleToFill"></image>
					</view>
					<view class="product_list_desc">
						<view class="product_list_desc_title">
							{{item.produce_info.name}}
						</view>
						<view class="product_list_desc_lable">
							{{item.produce_info.product_text_desc}}
						</view>
						<view class="product_list_desc_price">
							<text class="product_list_min_price">
								￥{{item.produce_info.product_min_price}}
							</text>
							<text class="product_list_max_price">
								￥{{item.produce_info.product_max_price}}
							</text>
							<text class="product_list_sale">
								{{item.produce_info.product_sale}}人已付款
							</text>
						</view>
						<view class="product_list_shop">
							{{item.product_additional.desc.desc}}
							<text class="iconfont icon-enter"></text>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="product">
					<view class="productLeft">
						<view v-if="index % 2 != 0" class="content" v-for="(item, index) in product_list" :key="index" @click="navTo('../product/index?_id='+item._id)">
							<image :src="item.produce_info.product_important_img" mode="widthFix"></image>
							<view class="itemTitle">{{ item.produce_info.name }}</view>
							<view class="itemPrice">
								<view class="left">￥{{ item.produce_info.product_min_price }}</view>
								<view class="right">已售{{ item.produce_info.product_sale }}</view>
							</view>
						</view>
					</view>
					<view class="productRight">
						<view v-if="index % 2 == 0" class="content" v-for="(item, index) in product_list" :key="index" @click="navTo('../product/index?_id='+item._id)">
							<image :src="item.produce_info.product_important_img" mode="widthFix"></image>
							<view class="itemTitle">{{ item.produce_info.name }}</view>
							<view class="itemPrice">
								<view class="left">￥{{ item.produce_info.product_min_price }}</view>
								<view class="right">已售{{ item.produce_info.product_sale }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="clear" v-if="productLoadBottom">加载中...</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data(){
			return {
				class_type:{
					product_type: 2,
					_id: 0,
					price_sale: 0,
					pageNum: 0,
					pageSize: 10
				},
				product_list: [],
				tabs_index: 0,
				tabs_icon: 0,
				product_list_length:1,
				productLoadBottom: false
			}
		},
		onLoad(option) {
			this.class_type._id = option._id;
			this.loadData();
		},
		onReachBottom() {
			this.productLoadBottom = true;
			this.class_type.pageNum += 1;
			this.loadData();
		},
		methods:{
			async loadData(){
				uni.showLoading({})
				let res = await api.uniCloudApi(api.publicFun.product,this.class_type)
				if(this.class_type.pageNum == 0){
					this.product_list = []
				}
				this.product_list = this.product_list.concat(res);
				this.productLoadBottom = false;
				uni.hideLoading()
			},
			tabs_load(index){
				this.tabs_index = index;
				this.class_type.pageNum = 0;
				this.class_type.price_sale = index;
				this.loadData()
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			back(){
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss">
	.bg_title{
		top: 0;
		/* #ifdef APP-PLUS */
		padding-top: 44px;
		/* #endif */
		z-index: 1;
	}
	.product_none{
		padding-top: 88px;
		width: 100%;
		line-height: 800rpx;
		text-align: center;
		font-size: 35rpx;
		color: #999999;
	}
	.tabs{
		width: 90%;
		display: flex;
		padding: 0 5%;
		height: 70rpx;
		background-color: #FFFFFF;
		.tab_title,
		.tab_title_active{
			width: 30%;
			text-align: center;
			line-height: 70rpx;
		}
		.tab_title_active{
			font-size: 28rpx;
			color: #F0AD4E;
		}
		.tab_icon{
			width: 10%;
			text-align: center;
			line-height: 70rpx;
			text{
				font-size: 40rpx;
			}
		}
	}
	.product{
		width: 100%;
		.product_list{
			width: calc(100% - 40rpx);
			height: 300rpx;
			background-color: #FFFFFF;
			display: flex;
			padding: 20rpx 20rpx 0 20rpx;
			.product_list_image{
				width: 250rpx;
				height: 250rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
			.product_list_desc{
				width: calc(100% - 250rpx);
				margin-left: 20rpx;
				.product_list_desc_title{
					width: 100%;
					height: 80rpx;
					overflow: hidden;
					line-height: 40rpx;
					font-size: 29rpx;
				}
				.product_list_desc_lable{
					width: 100%;
					font-size: 20rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #999999;
				}
				.product_list_desc_price{
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					.product_list_min_price{
						color: $uni-back-color;
						font-weight: bold;
						font-size: 34rpx;
					}
					.product_list_max_price{
						color: #999999;
						font-size: 18rpx;
						margin-left: 15rpx;
						text-decoration: line-through;
					}
					.product_list_sale{
						color: #999999;
						margin-left: 30rpx;
						font-size: 18rpx;
					}
				}
				.product_list_shop{
					font-size: 20rpx;
					color: #535353;
					text{
						font-size: 26rpx;
					}
				}
			}
		}
		.product{
			width: 100%;
			display: flex;
			position: relative;
			// background-image: linear-gradient(to bottom, #ff9a6b, #ff46af);
			top: -13rpx;
			.productLeft,
			.productRight {
				width: 50%;
				.content {
					width: 90%;
					margin: 0 5%;
					box-shadow: 0 0 15rpx 0 #dcdcdc;
					border-radius: 25rpx;
					margin-top: 15rpx;
					margin-bottom: 25rpx;
					float: left;
					background-color: #FFFFFF;
					image {
						border-radius: 25rpx 25rpx 0 0;
						width: 100%;
					}
					.itemTitle {
						width: 95%;
						padding: 0 2.5%;
						line-height: 35rpx;
					}
					.itemPrice {
						width: 90%;
						padding: 0 5%;
						display: flex;
						height: 55rpx;
						view {
							width: 50%;
							height: 55rpx;
							line-height: 55rpx;
						}
						.left {
							color: #e54d42;
							font-weight: bold;
							font-size: 26rpx;
						}
						.right {
							color: #999999;
							text-align: right;
							font-size: 22rpx;
						}
					}
				}
			}
		}
	}
</style>
